<template>
  <div class="login">
    <div class="videoContainer">
      <video
        class="fullscreenVideo"
        id="bgVid"
        playsinline=""
        autoplay=""
        muted=""
        loop=""
      >
        <source
          src="https://slwl-admin.itheima.net/static/media/video.3cf57b17.mp4"
          type="video/mp4"
        />
      </video>
    </div>
    <el-card class="card">
      <div>
        <el-image
          fit="cover"
          style="width: 210px; margin: 15px; padding-left: 68px"
          type="flex"
          justify="center"
          src="https://slwl-admin.itheima.net/static/img/logo1.33ef7fa0.png"
        ></el-image>
      </div>
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        style="margin-top: 20px"
      >
        <el-form-item prop="account">
          <el-input
            v-model="form.account"
            prefix-icon="iconfont el-icon-user-solid"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            prefix-icon="iconfont el-icon-unlock"
          ></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input
            placeholder="验证码"
            v-model="form.code"
            prefix-icon="iconfont el-icon-key"
          >
            <template #suffix>
              <el-link :underline="false" @click="getYanzheng">
                <img style="height: 30px; margin-top: 5px" :src="src" />
              </el-link>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="submit" type="primary">登录</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import { getYanzhengm } from "@/api/login";

export default {
  data() {
    return {
      src: "",
      url: "",
      form: {
        code: "",
        key: "",
        account: "shenlingadmin",
        password: "123456",
      },
      rules: {
        account: [{ required: true, message: "不能为空" }],
        password: [{ required: true, message: "不能为空" }],
        code: [{ required: true, message: "不能为空" }],
      },
    };
  },
  created() {
    this.getYanzheng();
  },
  methods: {
    async submit() {
      // console.log(this.form);
      await this.$store.dispatch("user/loginInfo", this.form);
      this.$router.push("/");
      this.$refs.formRef.validate();
    },
    // 扯淡操作，写完看不懂（看懂了，但是不用了）
    async getImg() {
      // 得到一个blob类型的数据
      const { data } = await axios({
        url: "https://slwl-geteway.itheima.net/manager/captcha?key=50085BE66467E3506C93843E1676899422432&0=50085BE66467E3506C93843E1676899422432",
        responseType: "blob",
      });
      // 使用URL.createObje·ctURL，将其转化为url地址使用
      // console.log(data);
      const res = URL.createObjectURL(data);
      // console.log(res);
      this.src = res;
    },
    async getYanzheng() {
      // 随机生成key
      const key =
        "abacdefghiklmnopgrstuvWxyZABCDEFGHJKLMNOPQRSTUVWXYZ0123456789";
      const random = key
        .split("")
        .sort(() => Math.random() - 0.5)
        .slice(0, 10)
        .join("");
      this.form.key = random;
      // 获取验证码
      const res = await getYanzhengm(this.form.key);
      this.src = URL.createObjectURL(res.data);
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  min-height: 100vh;
  //padding-top: 100px;
  .videoContainer {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -100;
  }

  .videoContainer:before {
    content: "";
    position: absolute;
    width: 100vh;
    height: 100vh;
    display: block;
    z-index: -1;
    top: 0;
    left: 0;
    background: rgba(25, 29, 34, 0.65);
    background-size: cover;
  }

  .fullscreenVideo {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }

  .card {
    //overflow: hidden;
    position: fixed;
    margin: 100px auto;
    height: 440px;
    width: 420px;
    left: 36%;
    border-radius: 15px;
    background-color: rgb(255, 255, 255);
    .el-input {
      width: 320px;
      margin-left: 33px;
    }
    .el-button {
      height: 57px;
      width: 320px;
      margin-top: 20px;
      margin-left: 33px;
      //background-color: ;
    }
  }
}
</style>
